<template>
  <view class="home_content">
    <div class="home_head">
      <div class="head_left">
        <div class="head_portrait" :style="{ background: 'url(' + userInfo.portrait + ')' }"></div>
        <div class="head_name">
          <div class="head_title">Hi,{{ userInfo.username }}</div>
          <div class="head_greet">How are you feeling today?</div>
        </div>
      </div>
      <div class="head_right">
        <div class="head_inform">
          <img src="../../static/images/home/bx-bell.png" alt="" />
        </div>
        <div class="head_msg">
          <img src="../../static/images/home/bx-message-square-dots.png" alt="" />
        </div>
      </div>
    </div>
    <swiper></swiper>
   <SpecialistServices ></SpecialistServices>
    <div class="home_health home_kind">
      <div class="services_title kind_title">Health Needs</div>
      <div class="services_class kind_class">
        <div class="class_box" v-for="obj in healthNeeds" :key="obj.id">
          <div class="class_img">
            <img :src="obj.img" alt="" />
          </div>
          <div class="class_text">
            {{ obj.title }}
          </div>
          <div class="class_text" v-if="obj.title2">
            {{ obj.title2 }}
          </div>
        </div>
      </div>
    </div>
    <div class="home_popular home_kind">
      <div class="kind_title">
        <span>Popular Doctor</span>
        <span class="popular_all">Seee All</span>
      </div>
     <Doctor :DoctorMsg="popularDoctor"></Doctor>
    </div>
  </view>
</template>

<script>
import swiper from '../../components/Swiper/Swiper.vue'
import SpecialistServices from '../../components/SpecialistServices/SpecialistServices.vue'
import Doctor from '../../components/Doctor/Doctor.vue'
export default {
  data () {
    return {
      tabbarList: [],
      userInfo: {
        username: "Andy",
        portrait: "../../static/images/home/portrait.png",
      },
    
      healthNeeds: [
        {
          id: 1,
          img: require("../../static/images/home/Pharmacy.png"),
          title: "Pharmacy",
        },
        {
          id: 2,
          img: require("../../static/images/home/Hospital.png"),
          title: "Hospital",
        },
        {
          id: 3,
          img: require("../../static/images/home/General_and_Practitioner.png"),
          title: "General",
          title2: "Practitioner",
        },
        {
          id: 4,
          img: require("../../static/images/home/Ambulance.png"),
          title: "Ambulance",
        },
      ],
      popularDoctor: [
        {
          id: 1,
          name: "Dr. Emmly Lestiryno",
          icon: "",
          professionalField: "General Practitioner",
          location: "Elnodore Hospital",
          starLevel: "4.0",
        },
        {
          id: 2,
          name: "Dr.Jonsky Aliansiondry",
          icon: "",
          professionalField: "Dental Specialist",
          location: "Bundrohuse Hospital",
          starLevel: "4.0",
        },
      ],
     
    };
  },
  onLoad () { },
  methods: {
    
  },
  components:{
    swiper,
    SpecialistServices,
    Doctor
  }
};
</script>
<style lang="scss" scoped>
.home_content {
  padding: 32rpx 48rpx;
}

.home_head {
  display: flex;
  justify-content: space-between;

  .head_left {
    display: flex;

    .head_portrait {
      width: 80rpx;
      height: 80rpx;
      border-radius: 200rpx;
    }

    .head_name {
      margin-left: 30rpx;

      div {
        font-family: Plus Jakarta Sans;
        letter-spacing: 0.004999999888241291%;
        text-align: left;
      }

      .head_title {
        color: rgb(23, 23, 37);

        font-size: 36rpx;
        font-weight: 700;
        line-height: 52rpx;
      }

      .head_greet {
        color: rgb(120, 130, 138);
        font-size: 24rpx;
        font-weight: 600;
        line-height: 40rpx;
      }
    }
  }

  .head_right {
    display: flex;
    align-items: center;

    div {
      position: relative;
      width: 48rpx;
      height: 48rpx;

      &::after {
        content: "12";
        color: #fff;
        text-align: center;
        line-height: 22rpx;
        font-size: 12rpx;
        position: absolute;
        width: 22rpx;
        height: 22rpx;
        right: 0rpx;
        top: 0rpx;
        background: url("../../static/images/home/circle.png") no-repeat;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }

    .head_inform {
      margin-right: 40rpx;
    }

    .head_msg {}
  }
}


.home_kind {
  margin-top: 48rpx;

  .kind_title {
    color: rgb(23, 23, 37);
    font-family: Plus Jakarta Sans;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 52rpx;
    letter-spacing: 0.004999999888241291%;
    text-align: left;
  }

  .kind_class {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .class_box {
      margin: 32rpx 0;

      .class_img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 132rpx;
        height: 132rpx;
        background: rgb(236, 234, 255);
        border-radius: 20rpx;

        img {
          width: 64rpx;
          height: 64rpx;
        }
      }

      .class_text {
        margin-top: 16rpx;
        color: rgb(102, 112, 122);
        font-family: Plus Jakarta Sans;
        font-size: 24rpx;
        font-weight: 500;
        // line-height: 40rpx;
        letter-spacing: 0.004999999888241291%;
        text-align: center;
      }
    }
  }
}

.home_popular {
  .kind_title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .popular_all {
      color: rgb(18, 25, 66);
      font-family: Plus Jakarta Sans;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 44rpx;
      letter-spacing: 0.004999999888241291%;
      text-align: left;
    }
  }
}
</style>
